<script setup lang="ts">
import { Fragment, h, ref } from "vue";

import { Plus } from "@element-plus/icons-vue";
import { ElButton, ElImage, ElTag } from "element-plus";
import DialogCarouse from "./compontents/DialogCarouse.vue";

import ApiContent from "@/api/content";
import useEnum from "@/hooks/useEnum";
import useModal from "@/hooks/useModal";
import useDelete from "@/hooks/useDelete";
import useProTable from "@/hooks/useProTable";

const tableColumns = [
  {
    label: "序号",
    type: "index",
    width: 70,
  },
  {
    label: "图片",
    prop: "img",
    width: 160,
    slot: {
      default: ({ row }) => {
        return h(ElImage, {
          class: "w-120px",
          src: row?.img,
          previewSrcList: [row?.img],
          previewTeleported: true,
        });
      },
    },
  },
  {
    label: "标题",
    prop: "title",
    minWidth: 200,
  },
  {
    label: "展示状态",

    width: 140,
    slot: ({ row }: any) =>
      h(
        ElTag,
        { type: row.status == 1 ? "info" : "success" },
        row.status == 1 ? "不展示" : "展示"
      ),
  },
  {
    label: "点击事件",
    minWidth: 200,
    slot: ({ row }: any) =>
      h("p", {
        innerHTML: `事件：${get(row.jump_type, "label")}<br>${
          row.jump_type != 0 ? "地址：" + row.jump_url : ""
        }`,
      }),
  },
  {
    label: "排序",
    prop: "sort",
    width: 100,
  },
  // {
  //     label: "备注",
  //     prop: "desc",
  //     minWidth: 200,
  // },
  {
    label: "创建时间",
    prop: "create_time",
    minWidth: 120,
  },
  {
    label: "操作",
    width: 140,
    slot: ({ row }: any) =>
      h(Fragment, [
        h(
          ElButton,
          {
            link: true,
            type: "primary",
            onClick: () => modalApi.open(row),
          },
          "编辑"
        ),
        h(
          ElButton,
          {
            link: true,
            type: "danger",
            loading: isDeleting.value,
            onClick: () => del(row),
          },
          "删除"
        ),
      ]),
  },
];

const { get } = useEnum("EnumBannerType");

const refTable = ref();
const [Modal, modalApi] = useModal({
  width: 500,
  title: (source) => (source ? "编辑轮播图" : "新增轮播图"),
});

// 刷新Table列表
const refreshList = () => refTable.value.refresh();

// 删除
const { isFetching: isDeleting, del } = useDelete(ApiContent.deleteInfo, {
  refresh: refreshList,
});

const [ProTable] = useProTable({
  size: "large",
  fetchUrl: ApiContent.getInfoList,
  fetchOptions: { defaultSearch: { type: 7, category: 2 } },
  tableOptions: {
    columns: tableColumns,
  },
});
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton
        type="primary"
        size="large"
        :icon="Plus"
        @click="modalApi.open()"
        >新增轮播图
      </ElButton>
    </template>
  </ProTable>

  <Modal>
    <DialogCarouse @success="refreshList" />
  </Modal>
</template>
